<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录</title>
		<link rel="shortcut icon" href="http://www.mi.com/favicon.ico"/>
		<style>
			input,select {
				outline: none;
			}
			.logo {
				float: left;
				width: 200px;
				height: 55px;
				margin-left: 100px;

			}
			.logo h1 {
				float: right;
				font-size: 30px; 
				color: #333333;
				font-weight: 400;
				line-height: 55px;
				margin: auto;
			}
			
			.z {
				position: absolute;
				margin-top: 50px;
			}
			.dlu {
				position: relative;
				position: absolute;
				top: 32px;
				right: 100px;
				width: 410px;
				height: 554px;
				background-color: #FFFFFF;
			}
			.dlutop h1 {
				line-height: 80px;
				font-size: 22px;
				color: #666666;
				text-align: center;
			}
			.dlutop em {
				font-style: normal;
				font-size: 22px;
				color: #FF6700;
			}
			.dlutop h1 span {
				color: e0e0e0;
				font-size: 20px;
			}
			.dluzhong input {
				width: 346px;
				height: 48px;
				border: 1px solid #e0e0e0;
				margin-left: 30px;
				margin-bottom: 20px;
				color: #9b9b9b;
			}
			.dluzhong .last {
				background-color: #FF6700;
				color: #ffffff;
				margin-bottom: 0px;
			}
			.dluzhong p {
				font-size: 12px;
				color: #FF6700;
				text-align: center;
				margin-bottom: 80px;
			}
			.dlubotton {
				width: 356px;
				height: 12px;
				margin-left: 30px;
			}
			.dlubotton hr {
				float: left;
				width: 140px;
				margin-top: 10px;
			}
			.lasttop p {
				/* display: block; */
				vertical-align: middle;
				float: left;
				font-size: 12px;
				color: #bbbbbb;
			}
			.dlubotton .lasttop .hrright {
				float: left;
				width: 132px;
			}
			.lastbotton img {
				margin-left: 55px;
			}
			.saoma {
				display: none;
				position: absolute;
				top: 114px;
				left: 110px;
			}
			.dlu:hover .saoma {
				display: block;
			}
			.dlu:hover .dluzhong {
				visibility: hidden;
			}
		</style>
	</head>
	<body>
		<div class="logo">
			<a href="./index.html"><img src="image/小米图标.png" alt="" title="返回到主页"></a>
			<h1>小米商城</h1>
		</div>
		<div class="z">
			<a href="javascript:;" ><img src="image/登录.png" alt="" title="小米10"></a>
			<div class="dlu">
				<div class="dlutop">
					<h1><em>账号登录</em><span>&nbsp; &nbsp;|&nbsp; &nbsp;</span>扫码登录</h1>
				</div>
				<div class="dluzhong">
					<input type="text" name="" id="" placeholder="邮箱/手机号码/小米ID" />
					<input type="password" name="" id="" placeholder="密码" />
					<input type="submit" name=""  class="last" value="登录" onclick="alert('登录受限')"/>
					<p>用户名密码登录收不到验证码？</p>
				</div>
				<div class="saoma">
					<img src="./image/saoma1.png" alt="">
				</div>
				<div class="dlubotton">
					<div class="lasttop">
						<hr><p>其他方式登录</p><hr class="hrright">
					</div>
					<div class="lastbotton">
						<a href="javascript:;" target="_blank"><img src="image/登录last.png" alt=""></a>
					</div>
				</div>

			</div>
		</div>
	</body>
</html>
